<template>
  <div>
    <el-form :model="params"  label-position="right" size="small" label-width="110px" class="base-search-more">
       <el-row>
        <el-col :span="6" v-if="$store.state.type === 1">
          <el-form-item label="所属区域">
            <el-select style="width:100%" v-model="form.agentIds" filterable default-first-option placeholder="--区域--"
                       @change="$refs.pagination.handleSizeChange(10)">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent?18:24" style="text-align: right">
          <el-form-item label-width="0">
            <el-button type="primary" plain icon="el-icon-puls"  @click="addModel(1)">新增客服</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class=" base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" align="center"></el-table-column>
        <el-table-column prop="mobile" label="客服电话" min-width="120" align="center"></el-table-column>
        <el-table-column prop="agenname" label="区域" min-width="120" align="center"></el-table-column>
        <!-- <el-table-column prop="cuserId" label="客服类型" min-width="120" align="center"></el-table-column>-->
        <el-table-column label="二维码" width="260" align="left" style="line-height: 32px;overflow: auto">
          <template slot-scope="scope">
            <div class="table-first">
              <div class="bus-img">
                <img :src="'http://image.jiaowawang.cn/'+ scope.row.qrcode">
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" min-width="120" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="addModel(2,scope.row)" type="text" class="el-text-check" size="mini">查看/修改</el-button>
            <el-button class="el-text-danger" @click="deleteClass(scope.row)" type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
    </div>
    <el-dialog :title="form.id?'修改客服':'添加客服'" v-dialogDrag :visible.sync="dialogTableVisible" width="500px" :close-on-press-escap="true">
      <el-form :model="form" ref="ruleForm" label-width="100px"  size="small">
        <el-form-item label="所属区域" v-if="$store.state.showAgent">
          <el-row type="flex">
            <el-select v-model="form.agentIds" :disabled="true">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="此处和列表页面同步,若想更改请在列表页面更改" placement="top-start">
              <el-button type="text" icon="el-icon-question"></el-button>
            </el-tooltip>
          </el-row>
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :rules="[{ required: true, message: '手机号或座机号码未填',trigger: 'blur' }]">
          <el-input v-model="form.mobile" placeholder="输入客服电话"></el-input>
        </el-form-item>
        <el-form-item label="微信二维码" prop="qrcode" :rules="[{ required: true, message: '请上传图片', trigger: 'change' }]">
          <pt-upload class="up-img" :size="0.5" :upLoadImg="form.qrcode" @getUpLoad="getUpLoad"></pt-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="issubmitLoading" @click="submitForm('ruleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        issubmitLoading: false,//保存或修改
        isloadingTable: false,//表单等待
        dialogTableVisible: false,
        form: { //新增或修改角色
          id:'',
          mobile: '',
          qrcode: '',
          agentIds: ''
        },
        params: {  //表格查询
          agentIds: '',  //区域
          page: 0,
          size: 10,
        },
        tableData: {} // 表单数据
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentListArea
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.form.agentIds = val[0].id
            this.getTableList()
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      addModel(type, row) {                                            //打开对话框，开始新增
        if (type == 1 && this.tableData.list && this.tableData.list.length >=1) {
          this.$message.error('客服人员仅支持设置一人，请修改或删除后再添加！')
          return false
        }
        this.dialogTableVisible = true
        if (type == 1) {
          this.$nextTick(() => {
            this.$refs['ruleForm'].resetFields()
            this.form.id = ''
          });
        } else if (type == 2) {
          this.$nextTick(() => {
            this.form.id = row.id
            this.form.mobile = row.mobile
            this.form.agenid = row.agenid
            this.form.qrcode = row.qrcode
          })
        }
      },
      getTableList() { //获取列表数据
        this.isloadingTable = true
        const params = {...this.params }
        params.agentIds = this.form.agentIds
        this.$http.get('/server/custom/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(err => { this.isloadingTable = false })
      },
      deleteClass(row) {
        const params = {id: row.id, agentid: row.agentid}
        this.$http.get('/server/custom/delete?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '删除客服成功'})
            if (this.tableData.list.length =='1') {
              this.$refs.pagination.handleSizeChange(10)
            } else {
              this.getTableList()
            }
          }
        })
      },
      submitForm(formName) { //新增和保存
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = {...this.form }
            this.issubmitLoading = true
            if (params.id) {
              this.$http.post('/server/custom/update', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '修改客服信息成功'})
                  this.dialogTableVisible = false
                  this.getTableList()
                }
              }).finally(() => { this.issubmitLoading = false })
            } else {
              delete params.id
              this.$http.post('/server/custom/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '添加客服信息成功'})
                  this.dialogTableVisible = false
                  this.getTableList()
                }
              }).finally(() => { this.issubmitLoading = false })
            }
          }
        })
      },
      getUpLoad(img) { //获取图片地址
        this.form.qrcode = img
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './css/service.scss';
</style>
